<template>
	<view class="Picture">
		<!-- 绘本集 -->
		<view class="Picture-item margin bg-white padding radius flex justify-between">
			<view class="Picture-image radius bg-grey" :class="status ? '' : 'rloading'">
				<image v-if="value.cover" :src="value.cover" mode="aspectFill"></image>
			</view>
			<view class="Picture-info margin-left flex justify-between">
				<view>
					<view v-if="status" class="text-black">{{value.name}}</view>
					<view v-else class="rloading" style="width: 200upx;height: 40upx;"></view>
					<view v-if="status" class="text-sm margin-tb-xs text-grey">作者：{{value.author}}</view>
					<view v-else class="rloading margin-tb-xs" style="width: 100upx;height: 30upx;"></view>
				</view>
				<view>
					<button @click="addFn" class="cu-btn bg-orange sm">添加到书架</button>
				</view>
			</view>
		</view>
		<!-- 该绘本集包含的绘本 -->
		<view class="margin text-orange text-bold">该绘本集包含的绘本</view>
		<CardGrid type="Picture" @handle="addBookFn" @add="addBookFn" v-if="value.list" :list="value.list" />
		<!-- ios兼容 -->
		<view class="ios-safe"></view>
		<!-- 弹窗 -->
		<Modal :showCancel="!getUserInfoValue.isVip" @confirm="confirm" @cancel="showModal=false" :show="showModal">
			<view class="padding-xl">
				{{
				 	(getUserInfoValue && getUserInfoValue.isVip) ? '绘本添加成功' : '您还不是 VIP 会员，绘本添加失败，分享小程序得会员'
				}}
			</view>
		</Modal>
	</view>
</template>

<script>
	import CardGrid from '@/plugin/card_grid.vue';
	import Modal from '@/plugin/modal.vue';
	
	import * as api from '@/api/Picture/index.js';
	
	import {
		mapGetters
	} from 'vuex';
	
	export default {
		components:{
			CardGrid,
			Modal
		},
		computed: {
			...mapGetters('userInfo', ['getUserInfoValue'])
		},
		data() {
			return {
				status: false,
				value: {},
				showModal:false
			}
		},
		onLoad(options) {
			if (options.hasOwnProperty('id')) this.requestFn(options.id)
		},
		methods: {
			// 添加绘本
			async addBookFn(val){
				if (this.getUserInfoValue.isVip) {
					let res = await api.addBook(val.id);
					if (res.code === 0) {
						uni.showToast({
							title:"添加成功"
						})
					}
				} else {
					this.showModal = true;
				}
			},
			// 添加绘本集
			async addFn(){
				if (this.getUserInfoValue.isVip) {
					let res = await api.addSet(this.value.id);
					if (res.code === 0) {
						uni.showToast({
							title:"添加成功"
						})
					}
				} else {
					this.showModal = true;
				}
			},
			// 添加确认按钮
			confirm() {
				if (this.getUserInfoValue.isVip) {
					this.showModal = false
				} else {
					uni.navigateTo({
						url: '/personPages/Share/index'
					})
				}
			},
			// 获取资源论坛分类下的绘本集列表
			async requestFn(val) {
				let res = await api.bookList(val);
				if (res.code === 0) {
					console.log(res)
					this.value = res.data;
					this.status=true;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.Picture {
		.Picture-item {
			.Picture-image {
				width: 150upx;
				min-width: 150upx;
				height: 200upx;
				overflow: hidden;
                position: relative;
				image {
					width: 100%;
					height: 100%;
				}
             
			}
			.Picture-info{
				flex: auto;
				flex-direction: column;
			}
		}
	}
</style>